<template>
  <el-row class="analysisWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col type="flex">
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 30px;width: 280px">网站综合访问质量趋势对比</el-col>
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
        <el-col style="padding-left:20px;width: 300px;color: #00DDFF;font-size: 16px;font-weight: normal">
          {{ year }}年{{ month }}月<span v-if="dataType===10">{{ day }}日</span>
        </el-col>
      </el-col>
    </el-row>
    <el-row style="height: 28px">
      <el-row type="flex" justify="end">
        <div style="padding-left: 40px;width: 200px;margin-right: 200px">
          <el-select
            v-model="selectValue"
            size="small"
            @change="selectValueChanged"
          >
            <el-option v-for="(score, index) in scoreSelectList" :key="index" :value="Object.keys(score)[0]" :label="Object.values(score)[0]"/>
          </el-select>
        </div>
        <MonthWeekDay
          :dataType="dataType"
          @ClickedBtn="clickedBtn"
        />
      </el-row>
    </el-row>
    <el-row style="height:calc(100% - 68px);">
      <FourLineCharts
        :chartData="chartData"
        :height="'100%'"
        :xTitle="dataType === 30 ? '时' : '日'"
      />
    </el-row>
  </el-row>
</template>

<script>
  import FourLineCharts from './FourLineCharts'
  import MonthWeekDay from './MonthWeekDay'
  import apiUrl from '@/config'
  export default {
    name: 'LinePart',
    components: {
      FourLineCharts,
      MonthWeekDay
    },
    data() {
      return {
        baseURL: process.env.NODE_ENV === 'production' ? apiUrl.apiUrl.devUrl : apiUrl.apiUrl.testUrl, // 生产
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
        chartData: {
          legend: [],
          dataY: [],
          dataLineOne: [],
          dataLineTwo: [],
          dataLineThree: [],
          minY: 85,
          maxY: 95,
          dateType: 10
        },
        dataType: 10,
        selectValue: 'score',
        scoreSelectList: [],
        sourceData: {}
      }
    },
    created() {
      this.repeatInFive()
      this.getScoreSelectList()
    },
    methods: {
      repeatInFive() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.getTrend()
        this.timer = setInterval(() => {
          this.getTrend()
        }, 1000 * 60 * 5)
      },
      selectValueChanged() {
        this.formatChartData()
      },
      clickedBtn(value) {
        this.dataType = value
        this.chartData.dateType = value
        this.getTrend()
      },
      getTrend(){
        this.$axios.get(`${this.baseURL}/api/benchmarking/trendTime`, {
          params: {
            statisticsType: this.dataType
          }
        }).then((response) => {
          let res = response.data
        // window._api.apiTrendTimeFive({ statisticsType: this.dataType }).then(res => {
          if (res.status === 0) {
            for (let item in res.data) {
              res.data[item].forEach(i => {
                i.test_time = this.formatDate(i.test_time)
              })
            }
            this.sourceData = res.data
            this.formatChartData('score')
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      formatChartData() {
        this.chartData.legend = Object.keys(this.sourceData)
        let arr1 = []
        let arr2 = []
        let arr3 = []
        let y = []
        for (let item in this.sourceData) {
          this.sourceData[item].forEach(i => {
            if (item === this.chartData.legend[0]) {
              arr1.push(i[this.selectValue])
              y.push(i.test_time)
            }
            if (item === this.chartData.legend[1]) {
              arr2.push(i[this.selectValue])
            }
            if (item === this.chartData.legend[2]) {
              arr3.push(i[this.selectValue])
            }
          })
        }
        this.chartData.dataLineOne = arr1
        this.chartData.dataLineTwo = arr2
        this.chartData.dataLineThree = arr3
        this.chartData.dataY = y
        if (this.dataType === 30 ) {
          console.log(1)
        } else {
          this.markTag(this.chartData.dataY)
        }
      },
      formatDate(value) {
        let time = new Date(value*1000)
        let yy = time.getFullYear()      //年
        let mm = time.getMonth() + 1     //月
        let dd = time.getDate()          //日
        let hh = time.getHours()         //时
        let ii = time.getMinutes()       //分
        let ss = time.getSeconds()       //秒
        let result = yy + '-'
        if (mm < 10) result += '0'
        result += mm + '-'
        if (dd < 10) result += '0'
        result += dd + ' '
        if (hh < 10) result += '0'
        result += hh + ':'
        if (ii < 10) result += '0'
        result += ii + ':'
        if (ss < 10) result += '0'
        result += ss
        return result
      },
      getScoreSelectList(){
        this.$axios.get(`${this.baseURL}/api/benchmarking/scoreSelectList`).then((response) => {
        // window._api.apiScoreSelectList().then(res => {
          let res = response.data
          if (res.status === 0) {
            this.scoreSelectList = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      markTag(data) {
        let arr = []
        data.map(item => {
          arr.push(item.substring(0,10))
        })
        const yearMonthDay = Array.from(new Set(arr))
        yearMonthDay.map(item => {
          data[arr.findIndex(i => i === item)] +='*'
        })
      }
    }
  }
</script>

<style scoped>
.title{
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  text-align: left;
  padding: 0px 16px;
  color: #00DDFF;
  font-weight: bold;
}
.analysisWrap{
  height: 32vh;
  padding: 14px;
  background: rgba(14, 22, 95, 0.4);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
}
</style>
